<template>
  <div>
    <h2>Home</h2>
    <sTable
      :columns="columns"
      :dataSource="tableData"
      :options="options"
      :fetch="fetchTableData"
      :pagination="pagination"
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
    />
  </div>
</template>
 
<script>
import axios from 'axios'
export default {
  data() {
    return {
      columns: [
        {
          prop: 'company_id',
          label: '编号',
          width: 60
        },
        {
          prop: 'company_name',
          label: '加工厂名',
          // render 可以根据你想要渲染的方式渲染
          // jsx 不提供 v-model 指令，若你想要使用，，推荐使用插件 babel-plugin-jsx-v-model
          // jsx https://github.com/vuejs/babel-plugin-transform-vue-jsx
          render: (row, index) => {
            return (
              <span style="color: blue" onClick={e => this.handleClick(e, row)}>
                {row.company_name}
              </span>
            )
          }
        }
        // {
        //   button: true,
        //   label: '按钮组',
        //   group: [{
        //     // you can props => type size icon disabled plain
        //     name: '编辑',
        //     type: 'warning',
        //     icon: 'el-icon-edit',
        //     plain: true,
        //     onClick: (row, index) => { // 箭头函数写法的 this 代表 Vue 实例
        //       console.log(row, index)
        //     }
        //   }, {
        //     name: '删除',
        //     type: 'danger',
        //     icon: 'el-icon-delete',
        //     disabled: false,
        //     onClick(row) { // 这种写法的 this 代表 group 里的对象
        //       this.disabled = true
        //       console.log(this)
        //     }
        //   }]
        // }
      ],
      tableData: [],
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      options: {
        mutiSelect: true,
        index: false, // 显示序号， 多选则 mutiSelect
        loading: false, // 表格动画
        initTable: true // 是否一挂载就加载数据
      }
    }
  },
  methods: {
    handleClick(e, row) {
      //transform-vue-jsx 的nativeOnClick 失效 , 所以采用 event.cancelBubble 控制点击事件的冒泡... 如果点击事件不影响你的点击行事件，可以不传
      e.cancelBubble = true // 停止冒泡，否则会触发 row-click
      console.log(row)
    },
    fetchTableData() {
      this.options.loading = true
      axios
        .get('http://47.111.160.75:8082/yarn/getcompany?companyid=-1')
        .then(({ data: res }) => {
          this.tableData = res.data.slice(
            this.pagination.pageSize * (this.pagination.pageIndex - 1),
            this.pagination.pageSize * this.pagination.pageIndex
          )
          this.pagination.total = res.data.length
          this.options.loading = false
        })
        .catch(error => {
          console.log(error)
          this.options.loading = false
        })
    },
    handleRowClick(row, event, column) {
      // 点击行的事件，同理可以绑定其他事件
      console.log('click row:', row, event, column)
    },
    handleSelectionChange(selection) {
      console.log(selection)
    }
  }
}
</script>
复制代码